<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>webSlide - PPT演示文档javascript框架 BY @三水清</title>
	<link rel="stylesheet" href="src/css/webslide.css" />
	<link rel="stylesheet" href="src/css/codecolorer.css" />
</head>
<body>

<div id="slide" >
<div class="slides">
	<section id="cover" class="step" >
		<section class="title">
			<h1>JS入门及学习指南</h1>
			<h2><a href="//weibo.com/sanshuiqing" target="_blank">@ 三水清</a></h2>
			<h3>博客：<a href="//js8.in" target="_blank">JS8.IN</a></h3>
			<h3>webSlide：<a href="https://github.com/ksky521/webSlide/" target="_blank">Git</a></h3>
		</section>
	</section>
	<section id="slide2" class="step slide">
		<h1 class="header">我们来讨论些神马？</h1>
		<ul>
			<li>javascript是？</li>
			<li>script标签</li>
			<li>javascript基本语法</li>
			<li>变量类型</li>
			<li>常见对象及方法</li>
			<li>DOM基本知识介绍</li>
			<li>JSON & JSONP</li>
			<li>其他（编辑器，调试工具，趋势，学习资料..）</li>
		</ul>
	</section>
	
	<section id="slide3" class="step slide rebuild">
		<h1 class="header">什么是javascript</h1>
		<ul data-build>
			<li>是一种网络脚本语言</li>
			<li>ECMAScript标准</li>
			<li>JavaScript和JScript</li>
			<li>因表单验证而生，但不仅仅是验证表单！</li>
			<li>被误解的javascript</li>
		</ul>
	</section>
	<section id="slide4" class="step slide rebuild">
		<h1>script标签</h1>
		<div data-build><h2>type</h2>
		<ul>
			<li>text/javascript</li>
		</ul>
		<h2>charset</h2>
		<ul>
			<li>编码这个 javascript 程序的字符集，如UTF-8</li>
		</ul>
		<h2>src</h2>
		<ul>
			<li>js文件路径</li>
		</ul>
		<h2>script 放置的位置</h2>
		<ul>
			<li>head/body之内</li>
		</ul>
		<h2>noscript 标签</h2>
		<ul>
			<li>元素用来定义在脚本未被执行时的替代内容（文本）</li>
		</ul>
		</div>
	</section>
	<section id="grammar" class="step slide rebuild">
		<h1>基本语法 &nbsp; 1</h1>
		<h2>注释</h2>
		<ul>
			<li>//、/**/</li>
		</ul>
		<div data-build><h2>定义变量</h2>
		<ul>
			<li>var &lt;变量&gt; = &lt;表达式&gt;;</li>
			<li>变量名以字母和下划线开头</li>
		</ul>
		
		<h2>弱类型变量</h2>
		<ul>
			<li>变量声明时不需显式地指定其数据类型</li>
		</ul>
		<h2>运算符</h2>
		<ul>
			<li>+ &nbsp;&nbsp; - &nbsp;&nbsp; * &nbsp;&nbsp; / &nbsp;&nbsp; = &nbsp;&nbsp; % &nbsp;&nbsp; == &nbsp;&nbsp; != &nbsp;&nbsp; === &nbsp;&nbsp; !== ……</li>
		</ul>
		</div>
	</section>
	<section id="grammar2" class="step slide rebuild" >
		<h1>变量类型</h1>
		<h2>基础类型</h2>
		<ul>
			<li>undefined/string/number/boolean/object/function</li>
		</ul>
		<div data-build>
		<h2>对象类型</h2>
		<ul>
			<li>以基础类型为基础，从object这一种类型中发展起来的</li>
		</ul>
		
		<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br></div></td><td><div class="javascript codecolorer"><span class="co1">//分类标准是按照检验方法来分</span><br>
<span class="kw1">typeof</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">;</span><span class="co1">//"object"</span><br>
<span class="kw1">typeof</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span><span class="co1">//"function"</span><br>
<span class="kw1">typeof</span> <span class="nu0">1</span><span class="sy0">;</span><span class="co1">//"number"</span><br>
<span class="kw1">typeof</span> <span class="st0">'1'</span><span class="sy0">;</span><span class="co1">//"string"</span><br>
<span class="kw1">typeof</span> <span class="kw2">true</span><span class="sy0">;</span><span class="co1">//"boolean"</span><br>
<span class="kw1">typeof</span> abc<span class="sy0">;</span><span class="co1">//"undefined"</span><br>
<span class="kw1">typeof</span> <span class="kw2">null</span><span class="sy0">;</span><span class="co1">//"object"</span><br>
<br>
<span class="co1">//判断对象实例使用instanceof </span><br>
<span class="kw2">var</span> abc <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span><br>
abc <span class="kw1">instanceof</span> <span class="kw2">Function</span><span class="sy0">;</span><span class="co1">//true</span><br>
<span class="kw2">var</span> arr <span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">;</span><br>
arr <span class="kw1">instanceof</span> Array<span class="sy0">;</span><span class="co1">//true</span><br>
arr <span class="kw1">instanceof</span> Object<span class="sy0">;</span><span class="co1">//true</span></div></td></tr></tbody></table></div>
		</div>
	</section>
	
	<section id="grammar3" class="step slide rebuild">
		<h2>数值</h2>
		<p>在JavaScript中所有数值都被描绘成浮点值，当定义数值变量时记得<span style="color:red">不要用引号</span>。</p>
		<div data-build><div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br></div></td><td><div class="javascript codecolorer"><span class="kw2">var</span> a <span class="sy0">=</span> <span class="nu0">3</span><span class="sy0">;</span><br>
		<span class="kw2">var</span> b <span class="sy0">=</span> <span class="nu0">4</span><span class="sy0">;</span><br>
		<span class="kw2">var</span> ab <span class="sy0">=</span> a <span class="sy0">*</span> b<span class="sy0">;</span><span class="co1">//12</span></div></td></tr></tbody></table></div>
		<h2>字符串</h2>
		<p>一个字符串可由一连串的Unicode字符组成，并由一对双引号或单引号包围。</p>
		<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br></div></td><td><div class="javascript codecolorer"><span class="kw2">var</span> a <span class="sy0">=</span> <span class="st0">'hello'</span><span class="sy0">;</span><br>
	<span class="kw2">var</span> b <span class="sy0">=</span> <span class="st0">'weibo'</span><span class="sy0">;</span><br>
	<span class="kw2">var</span> ab <span class="sy0">=</span> a <span class="sy0">+</span> <span class="st0">" "</span> <span class="sy0">+</span> b<span class="sy0">;</span><span class="co1">//</span><br>
	<span class="co1">// +号进行字符串连接处理</span><br>
	<span class="co1">// (它还可用于数学上的加法运算)</span></div></td></tr></tbody></table></div>
		</div>
		</section>
	<section id="grammar4" class="step slide rebuild">
		<h2>布尔值</h2>
		<p>布尔类型在你进行条件判断的时候很有用，以了解是否符合指定的标准。布尔有两个可能的值:true和false。任何使用逻辑算法的比较结果都将是布尔值。</p>
		<div data-build><div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br></div></td><td><div class="javascript codecolorer"><span class="nu0">5</span> <span class="sy0">===</span> <span class="br0">(</span><span class="nu0">3</span> <span class="sy0">+</span> <span class="nu0">2</span><span class="br0">)</span><span class="sy0">;</span> <span class="co1">// = true </span><br>
		<span class="nu0">5</span> <span class="sy0">==</span> <span class="br0">(</span><span class="nu0">3</span> <span class="sy0">+</span> <span class="st0">'2'</span><span class="br0">)</span><span class="sy0">;</span> <span class="co1">// = false</span><br>
		<span class="co1">// 你可以给变量声明布尔值:</span><br>
		<span class="kw2">var</span> a <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span><br>
		<span class="co1">// 你可以像这样测试:</span><br>
		<span class="kw1">if</span> <span class="br0">(</span>a<span class="br0">)</span> <span class="br0">{</span><br>
		&nbsp; &nbsp; <span class="co1">// 你的代码</span><br>
		<span class="br0">}</span></div></td></tr></tbody></table></div>
		</div>
	</section>
	<section id="grammar5" class="step slide rebuild">
		<h2>数组</h2>
		<p>数组也是一个专门的对象，它可以包含任意数量的数据。要访问数组中的数据你就必须使用数字，用以引用其在数组中的”索引”（从0开始哦~）。</p>
		<div data-build><div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br></div></td><td><div class="javascript codecolorer"><span class="co1">// 两种声名数组的不同方式,</span><br>
&nbsp; &nbsp; <br>
<span class="co1">// 字面:</span><br>
<span class="kw2">var</span> fruits <span class="sy0">=</span> <span class="br0">[</span><span class="st0">'apple'</span><span class="sy0">,</span> <span class="st0">'lemon'</span><span class="sy0">,</span> <span class="st0">'banana'</span><span class="br0">]</span><span class="sy0">;</span><br>
&nbsp; &nbsp; <br>
<span class="co1">// 使用数组构造器:</span><br>
<span class="kw2">var</span> fruits <span class="sy0">=</span> <span class="kw2">new</span> Array<span class="br0">(</span><span class="st0">'apple'</span><span class="sy0">,</span> <span class="st0">'lemon'</span><span class="sy0">,</span> <span class="st0">'banana'</span><span class="br0">)</span><span class="sy0">;</span><br>
&nbsp; &nbsp; <br>
fruit<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="sy0">;</span> <span class="co1">// 访问数组中的第一个数据项 (apple)</span><br>
fruit<span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span><span class="sy0">;</span> <span class="co1">// 访问数组中的第二个数据项 &nbsp;(lemon)</span><br>
<br>
<span class="co1">// 多维数组</span><br>
<span class="kw2">var</span> school <span class="sy0">=</span> <span class="br0">[</span><span class="br0">[</span><span class="st0">'小明'</span><span class="sy0">,</span> <span class="st0">'小浪'</span><span class="br0">]</span><span class="sy0">,</span> <span class="br0">[</span><span class="st0">'大黄'</span><span class="sy0">,</span> <span class="st0">'小新'</span><span class="br0">]</span><span class="br0">]</span><span class="sy0">;</span><br>
<br>
school<span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="co1">// 小明在一班</span></div></td></tr></tbody></table></div>
	</div></section>
	
	<section id="grammar6" class="step slide rebuild">
		<h2>对象</h2>
		<p>对象是命名的的值的集合(键-值对)，它和数组很相似，唯一的不同之处在于你可以为每个数据值指定名字。</p>
		<div data-build>
		<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br></div></td><td><div class="javascript codecolorer"><span class="co1">// 两种声明对象的不同方式,</span><br>
&nbsp; &nbsp; <br>
<span class="co1">// 字面(大括号):</span><br>
<span class="kw2">var</span> I <span class="sy0">=</span> <span class="br0">{</span><br>
&nbsp; &nbsp; <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'Wang'</span><span class="sy0">,</span><br>
&nbsp; &nbsp; job<span class="sy0">:</span> <span class="st0">'RIA Developer'</span><span class="sy0">,</span><br>
&nbsp; &nbsp; site<span class="sy0">:</span><span class="st0">'js8.in'</span><br>
<span class="br0">}</span><span class="sy0">;</span><br>
&nbsp; &nbsp; <br>
<span class="co1">// 适用对象构造器:</span><br>
<span class="kw2">var</span> school <span class="sy0">=</span> <span class="kw2">new</span> Object<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span><br>
school.<span class="me1">class1</span> <span class="sy0">=</span> <span class="br0">[</span><span class="st0">'小明'</span><span class="sy0">,</span> <span class="st0">'小浪'</span><span class="br0">]</span><span class="sy0">;</span><br>
school.<span class="me1">class2</span> <span class="sy0">=</span> <span class="br0">[</span><span class="st0">'大黄'</span><span class="sy0">,</span> <span class="st0">'小新'</span><span class="br0">]</span><span class="sy0">;</span><br>
<br>
<span class="co1">// 两种访问方法</span><br>
<span class="co1">//.运算符</span><br>
school.<span class="me1">class1</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="sy0">;</span><span class="co1">//小明</span><br>
<span class="co1">//中括号</span><br>
school<span class="br0">[</span><span class="st0">'class2'</span><span class="br0">]</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="sy0">;</span><span class="co1">//大黄</span></div></td></tr></tbody></table></div>
	</div></section>	
	<section id="grammar8" class="step slide rebuild">
		<h2>函数</h2>
		<ul>
			<li>声明方法</li>
		</ul>
		<div data-build>
		<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><div class="javascript codecolorer"><span class="co1">// 使用函数操作创建一个新函数:</span><br>
<span class="kw2">function</span> myFunctionName<span class="br0">(</span>arg1<span class="sy0">,</span> arg2<span class="br0">)</span> <span class="br0">{</span><br>
&nbsp; &nbsp; <span class="co1">// 这里是函数的代码</span><br>
<span class="br0">}</span><br>
&nbsp; &nbsp; <br>
<span class="co1">// 如果你省略掉函数名，那么你创建的是"匿名函数":</span><br>
<span class="kw2">function</span><span class="br0">(</span>arg1<span class="sy0">,</span> arg2<span class="br0">)</span> <span class="br0">{</span><br>
&nbsp; &nbsp; <span class="co1">// 这里是函数的代码</span><br>
<span class="br0">}</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <br>
<span class="co1">// 执行函数仅需对他进行引用并使用圆括号 (附带参数):</span><br>
myFunctionName<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> <span class="co1">// 无参数</span><br>
myFunctionName<span class="br0">(</span><span class="st0">'foo'</span><span class="sy0">,</span> <span class="st0">'bar'</span><span class="br0">)</span><span class="sy0">;</span> <span class="co1">// 带参数</span><br>
&nbsp; &nbsp; <br>
<span class="co1">// 你也可以在不声明变量的情况下执行函数</span><br>
&nbsp; &nbsp; <br>
<span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span><br>
&nbsp; &nbsp; <span class="co1">// 这就是所谓的自调用匿名函数</span><br>
<span class="br0">}</span><span class="br0">)</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></div>
	</div>
	</section>
	<section id="grammar9" class="step slide">
		<h1>基本语法 &nbsp; 2</h1>
		<h2>语句</h2>
		<ul>
			<li>循环</li>
			<li style="list-style:none;" >
				<ul>
					<li style="list-style:square inside">for/for-in</li>
					<li style="list-style:square inside">while/do-while</li>
				</ul>
			</li>
			<li>判断</li>
			<li style="list-style:none;" >
				<ul>
					<li style="list-style:square inside">if/if-else</li>
					<li style="list-style:square inside">switch</li>
				</ul>
			</li>
		</ul>
		
	</section>
	<section id="grammar10" class="step slide rebuild">
		<h2>循环语句：for/for-in</h2>
		<ul>
			<li>for：普通循环</li>
			<li>for-in：对象属性遍历</li>
		</ul>
		<div data-build>
		<div style="overflow:auto;white-space:nowrap;width:700px;" class="codecolorer-container javascript railscasts"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br></div></td><td><div style="white-space:nowrap" class="javascript codecolorer"><span class="co1">//for 循环</span><br>
<span class="kw1">for</span><span class="br0">(</span><span class="kw2">var</span> i <span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0">&lt;</span> <span class="nu0">10</span><span class="sy0">;</span> i<span class="sy0">++</span> <span class="br0">)</span><span class="br0">{</span><br>
&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span>i<span class="br0">)</span><span class="sy0">;</span><br>
<span class="br0">}</span><br>
<br>
<span class="co1">//for-in循环用于对象遍历</span><br>
<span class="kw2">var</span> I <span class="sy0">=</span> <span class="br0">{</span><br>
&nbsp; &nbsp; <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'Wang'</span><span class="sy0">,</span><br>
&nbsp; &nbsp; job<span class="sy0">:</span> <span class="st0">'RIA Developer'</span><span class="sy0">,</span><br>
&nbsp; &nbsp; site<span class="sy0">:</span><span class="st0">'js8.in'</span><br>
<span class="br0">}</span><span class="sy0">;</span><br>
<span class="kw1">for</span><span class="br0">(</span><span class="kw2">var</span> i <span class="kw1">in</span> I<span class="br0">)</span><span class="br0">{</span><br>
&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span>I<span class="br0">[</span>i<span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span><br>
<span class="br0">}</span></div></td></tr></tbody></table></div>
	</div></section>
	
	<section id="grammar11" class="step slide rebuild">
		<h2>循环语句：while/do-while</h2>
		<ul>
			<li>while：先判断</li>
			<li>do-while：先做一次再判断</li>
		</ul>
		<div data-build>
		<div style="overflow:auto;white-space:nowrap;width:700px;" class="codecolorer-container javascript railscasts"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br></div></td><td><div style="white-space:nowrap" class="javascript codecolorer"><span class="co1">//while循环</span><br>
<span class="kw2">var</span> a <span class="sy0">=</span> <span class="br0">[</span><span class="nu0">0</span><span class="sy0">,</span> <span class="nu0">1</span><span class="sy0">,</span> <span class="nu0">2</span><span class="sy0">,</span> <span class="nu0">3</span><span class="sy0">,</span> <span class="nu0">4</span><span class="sy0">,</span> <span class="nu0">5</span><span class="sy0">,</span> <span class="nu0">6</span><span class="sy0">,</span> <span class="nu0">7</span><span class="br0">]</span><span class="sy0">;</span><br>
<span class="kw2">var</span> len <span class="sy0">=</span> a.<span class="me1">length</span><span class="sy0">;</span><br>
<span class="kw1">while</span><span class="br0">(</span>len<span class="sy0">--</span><span class="br0">)</span><span class="br0">{</span><br>
&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span>a<span class="br0">[</span>len<span class="br0">]</span><span class="br0">)</span><span class="sy0">;</span><br>
<span class="br0">}</span><br>
<span class="co1">//do-while循环，先do，后判断再循环</span><br>
len <span class="sy0">=</span> a.<span class="me1">length</span><span class="sy0">;</span><br>
<span class="kw1">do</span><span class="br0">{</span><br>
&nbsp; &nbsp; len<span class="sy0">--;</span><br>
&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span>len<span class="br0">)</span><span class="sy0">;</span> &nbsp;<br>
<span class="br0">}</span><span class="kw1">while</span><span class="br0">(</span>len<span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
	</div></section>
	
	<section id="grammar12" class="step slide rebuild">
		<h2>判断语句：if-else/switch</h2>
		<div data-build>
		<div style="overflow:auto;white-space:nowrap;width:700px;" class="codecolorer-container javascript railscasts"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br></div></td><td><div style="white-space:nowrap" class="javascript codecolorer"><span class="kw2">var</span> a <span class="sy0">=</span> <span class="nu0">12</span><span class="sy0">;</span><br>
<span class="co1">//if-else 判断</span><br>
<span class="kw1">if</span><span class="br0">(</span>a <span class="sy0">==</span> <span class="nu0">12</span><span class="br0">)</span><span class="br0">{</span><span class="co1">//将可能性大的条件往前写，减少判断</span><br>
&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'a = 12'</span><span class="br0">)</span><span class="sy0">;</span><br>
<span class="br0">}</span><span class="kw1">else</span> <span class="kw1">if</span><span class="br0">(</span>a <span class="sy0">==</span> <span class="nu0">34</span><span class="br0">)</span><span class="br0">{</span><br>
&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'a = 34'</span><span class="br0">)</span><span class="sy0">;</span><br>
<span class="br0">}</span><span class="kw1">else</span><span class="br0">{</span><br>
&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'end'</span><span class="br0">)</span><span class="sy0">;</span><br>
<span class="br0">}</span><br>
<br>
<span class="co1">//switch判断</span><br>
<span class="kw1">switch</span><span class="br0">(</span>a<span class="br0">)</span><span class="br0">{</span><br>
&nbsp; &nbsp; <span class="kw1">case</span> <span class="nu0">12</span><span class="sy0">:</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'a = 12'</span><span class="br0">)</span><span class="sy0">;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">break</span><span class="sy0">;</span><span class="co1">//不break，继续执行</span><br>
&nbsp; &nbsp; <span class="kw1">case</span> <span class="nu0">34</span><span class="sy0">:</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'a = 34'</span><span class="br0">)</span><span class="sy0">;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">break</span><span class="sy0">;</span><br>
&nbsp; &nbsp; <span class="kw2">default</span><span class="sy0">:</span><span class="co1">//默认</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'end'</span><span class="br0">)</span><span class="sy0">;</span><br>
<span class="br0">}</span></div></td></tr></tbody></table></div>
		
	</div></section>
	
	<section id="obj1" class="step slide rebuild" >
		<h1>常见对象及方法 &nbsp; 1</h1>
		<ul data-build>
			<li>String：<span style="color:#F60">"string"</span></li>
			<li style="list-style:none;" >
				<ul>
					<li style="list-style:square inside">"123".length<button onclick="alert('123'.length);">getLength</button></li>
					<li style="list-style:square inside">indexOf()/replace()/substring()/slice()。。。</li>
				</ul>
			</li>
			<li>Array：<span style="color:#F60">[1,2,3] []</span></li>
			<li style="list-style:none;">
				<ul>
					<li style="list-style:square inside">[1,2,3].length<button onclick="alert([1,2,3].length);">getLength</button></li>
					<li style="list-style:square inside">push()/pop()/shift()/unshift()。。。</li>
				</ul>
			</li>
			<li>Date：<span style="color:#F60">new Date(12345678901)</span><button onclick="alert(new Date());">getDate</button></li>
			<li style="list-style:none;">
				<ul>
					<li style="list-style:square inside">getTime()/getFullYear()/getHours()。。。</li>
				</ul>
			</li>
			<li>Math：<span style="color:#F60">Math.PI、Math.max(2,3)</span><button onclick="alert(Math.max(2,3));">RUN</button></li>
			<li>RegExp：<span style="color:#F60">/^\s|\s$/img</span></li>
			<li style="list-style:none;">
				<ul>
					<li style="list-style:square inside">/e/ig.test('h<span style="color:red">E</span>llo world')<button onclick="alert(/e/g.test('hello world'));">RUN</button></li>
					<li style="list-style:square inside">exec()。。。</li>
				</ul>
			</li>
		</ul>
		
	</section>
	<section id="obj2" class="step slide rebuild">
		<h1>常见对象及方法 &nbsp; 2</h1>
		<ul data-build>
			<li>window：<span style="color:#F60">alert('hello world')</span></li>
			<li>document：<span style="color:#F60">.write...</span><button onclick='alert(document);'>Run</button></li>
			<li>navigator：<span style="color:#F60">alert(navigator.userAgent);<button onclick='alert(navigator.userAgent);'>Run</button></span></li>
			<li>location：<span style="color:#F60">location.href...<button onclick='alert(location.href);'>Run</button></span></li>
		</ul>
		<div data-build>
		<center><img src="src/img/udc0.png" style="position:absolute;left:0;top:340px;width:900px" /></center></div>
	</section>
	<section id="step10" class="step slide rebuild">
		<h1>DOM</h1>
		<ul>
			<li>文档对象模型(Document Object Model)，通常简称为DOM，是网站内容与JavaScript互通的接口。自JavaScript成为最常用的语言时JavaScript和DOM通常被视为独立的实体。DOM接口用于存取、遍历和控制HTML和XML文档</li>
		</ul>
		<div data-build>
		<div class="codecolorer-container html4strict railscasts" style="position:absolute;left:50px;top:340px;overflow:auto;white-space:nowrap;width:420px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br></div></td><td><div class="html4strict codecolorer"><span class="sc2">&lt;<span class="kw2">html</span>&gt;</span><br>
&nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">head</span>&gt;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">title</span>&gt;</span>Sample Page<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">title</span>&gt;</span><br>
&nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">head</span>&gt;</span><br>
&nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">body</span>&gt;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">p</span>&gt;</span>hello world!<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span><br>
&nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">body</span>&gt;</span><br>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">html</span>&gt;</span></div></td></tr></tbody></table></div>
		<img src="src/img/udc2.png" style="position:absolute;right:50px;top:300px;"/>
		</div>
	</section>
	
	<div id="idName" node-type="hello" style="display:none;">
		<ul id="ul">
			<li>i am 1</li>
			<li>i am 2</li>
			<li>i am 3</li>
		</ul>
	</div>
	
	<script type="text/javascript">
		var $demoNode = document.getElementById('idName');
	</script>
	
	<section id="dom1" class="step slide">
		<h1>获取DOM节点</h1>
		
		<div class="codecolorer-container html4strict railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br></div></td><td><div class="html4strict codecolorer"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"idName"</span> node-<span class="kw3">type</span><span class="sy0">=</span><span class="st0">"hello"</span>&gt;</span><br>
&nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"ul"</span>&gt;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">li</span>&gt;</span>i am 1<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">li</span>&gt;</span>i am 2<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">li</span>&gt;</span>i am 3<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span><br>
&nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span><br>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></td></tr></tbody></table></div>

		<h2>document.getElementById <button onclick="alert($demoNode.innerHTML)">RUN</button></h2>
		<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br></div></td><td><div class="javascript codecolorer"><span class="co1">//获取node</span><br>
<span class="kw2">var</span> node <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'idName'</span><span class="br0">)</span><span class="sy0">;</span><br>
<span class="kw3">alert</span><span class="br0">(</span>node.<span class="me1">innerHTML</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
		<h2>node.getElement<span style="color:red">s</span>ByTagName <button onclick="alert($demoNode.getElementsByTagName('li'))">RUN</button></h2>
		<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br></div></td><td><div class="javascript codecolorer"><span class="co1">//获取li的nodelist组合</span><br>
<span class="kw2">var</span> node <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'ul'</span><span class="br0">)</span><span class="sy0">;</span><br>
node.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'li'</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
			
	</section>
	<section id="dom2" class="step slide">
		<h2>获取节点属性：node.getAttribute/setAttribute</h2>
		<div class="codecolorer-container html4strict railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br></div></td><td><div class="html4strict codecolorer"><span class="sc2">&lt;<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"idName"</span> node-<span class="kw3">type</span><span class="sy0">=</span><span class="st0">"hello"</span>&gt;</span><br>
&nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">ul</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"ul"</span>&gt;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">li</span>&gt;</span>i am 1<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">li</span>&gt;</span>i am 2<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span><br>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">li</span>&gt;</span>i am 3<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">li</span>&gt;</span><br>
&nbsp; &nbsp; <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">ul</span>&gt;</span><br>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">div</span>&gt;</span></div></td></tr></tbody></table></div>
	<br/>
	<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br></div></td><td><div class="javascript codecolorer" style="white-space:nowrap"><span class="kw2">var</span> myNode <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'idName'</span><span class="br0">)</span><span class="sy0">;</span><br>
myNode.<span class="me1">getAttribute</span><span class="br0">(</span><span class="st0">'node-type'</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
	
	<p><button onclick="alert($demoNode.getAttribute('node-type'))">获取node-type</button></p>
	<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br></div></td><td><div class="javascript codecolorer" style="white-space:nowrap"><span class="kw2">var</span> myNode <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'idName'</span><span class="br0">)</span><span class="sy0">;</span><br>
myNode.<span class="me1">setAttribute</span><span class="br0">(</span><span class="st0">'node-type'</span><span class="sy0">,</span><span class="st0">'world'</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
	<p><button onclick="$demoNode.setAttribute('node-type','world');alert('修改成功')">修改node-type</button></p>
	</section>
	
	<section id="dom3" class="step slide">
		<h2>创建和删除节点</h2>
		
		<p id="cNode"><b>实例</b>：hello </p>
		<div class="codecolorer-container html4strict railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br></div></td><td><div class="html4strict codecolorer"><span class="sc2">&lt;<span class="kw2">p</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"cNode"</span>&gt;</span>hello <span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></td></tr></tbody></table></div>
		<p>创建：createElement/createTextNode<button onclick="createNode()">创建节点</button></p>
		<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br></div></td><td><div class="javascript codecolorer"><span class="co1">//创建元素节点</span><br>
<span class="kw2">var</span> $span <span class="sy0">=</span> document.<span class="me1">createElement</span><span class="br0">(</span><span class="st0">'span'</span><span class="br0">)</span><span class="sy0">;</span><br>
<span class="co1">//创建文本节点</span><br>
<span class="kw2">var</span> $text <span class="sy0">=</span> document.<span class="me1">createTextNode</span><span class="br0">(</span><span class="st0">'world!'</span><span class="br0">)</span><span class="sy0">;</span><br>
$span.<span class="me1">style</span>.<span class="me1">color</span> <span class="sy0">=</span> <span class="st0">'red'</span><span class="sy0">;</span><span class="co1">//给点color see see</span><br>
$span.<span class="me1">appendChild</span><span class="br0">(</span>$text<span class="br0">)</span><span class="sy0">;</span><br>
<span class="co1">//获取插入父节点</span><br>
<span class="kw2">var</span> node <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'cNode'</span><span class="br0">)</span><span class="sy0">;</span><br>
node.<span class="me1">appendChild</span><span class="br0">(</span>$span<span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
	
	<p>删除：.removeChild<button onclick="removeNode()">删除节点</button></p>
	<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:780px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br></div></td><td><div class="javascript codecolorer"><span class="kw2">var</span> node <span class="sy0">=</span> document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">'cNode'</span><span class="br0">)</span><span class="sy0">;</span><span class="co1">//获取p</span><br>
node <span class="sy0">=</span> node.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'span'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span><span class="sy0">;</span><span class="co1">//获取span列表，取第一个</span><br>
node.<span class="me1">parentNode</span>.<span class="me1">removeChild</span><span class="br0">(</span>node<span class="br0">)</span><span class="sy0">;</span><span class="co1">//删除</span></div></td></tr></tbody></table></div>
	
	<script type="text/javascript">
	function createNode(){
		//创建元素节点
		var $span = document.createElement('span');
		//创建文本节点
		var $text = document.createTextNode('world!');
		$span.style.color = 'red';//给点color see see
		$span.appendChild($text);
		//获取插入父节点
		var node = document.getElementById('cNode');
		node.appendChild($span);
	}
	function removeNode(){
		var node = document.getElementById('cNode').getElementsByTagName('span')[0];
		node.parentNode.removeChild(node);
	}
</script>
	</section>
	
	<section id="dom4" class="step slide rebuild">
		<h2>节点关系</h2>
		<div data-build>
		<div class="codecolorer-container html4strict railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br></div></td><td><div class="html4strict codecolorer"><span class="sc2">&lt;<span class="kw2">p</span>&gt;</span><br>
&nbsp; &nbsp; <span class="sc2">&lt;<span class="kw2">strong</span>&gt;</span>Hello<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">strong</span>&gt;</span><br>
&nbsp; &nbsp; how are you doing?<br>
<span class="sc2">&lt;<span class="sy0">/</span><span class="kw2">p</span>&gt;</span></div></td></tr></tbody></table></div>
		<center style="margin-top:20px;"><img src="src/img/udc18.png" alt="" /></center>
	</div>
	</section>
	
	<section id="json" class="step slide rebuild">
		<h1>JSON</h1>
		<p>JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式</p>
		<p><a href="http://www.json.org">http://www.json.org</a></p>
		<div data-build>
		<div class="codecolorer-container javascript railscasts" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br></div></td><td><div class="javascript codecolorer"><span class="br0">{</span><br>
　<span class="st0">"name"</span><span class="sy0">:</span><span class="st0">"张三"</span><span class="sy0">,</span><br>
　<span class="st0">"password"</span><span class="sy0">:</span><span class="st0">"123456"</span><span class="sy0">,</span><br>
　<span class="st0">"department"</span><span class="sy0">:</span><span class="st0">"技术部"</span><span class="sy0">,</span><br>
　<span class="st0">"sex"</span><span class="sy0">:</span><span class="st0">"男"</span><span class="sy0">,</span><br>
　<span class="st0">"old"</span><span class="sy0">:</span><span class="nu0">30</span><br>
<span class="br0">}</span></div></td></tr></tbody></table></div>

<div class="codecolorer-container xml railscasts" style="overflow:auto;white-space:nowrap;width:700px;margin-top:20px"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br></div></td><td><div class="xml codecolorer"><span class="sc3"><span class="re1">&lt;?xml</span> <span class="re0">version</span>=<span class="st0">"1.0"</span> <span class="re0">encoding</span>=<span class="st0">"utf-8"</span><span class="re2">?&gt;</span></span><br>
<span class="sc3"><span class="re1">&lt;user<span class="re2">&gt;</span></span></span><br>
<span class="sc3"><span class="re1">&lt;name<span class="re2">&gt;</span></span></span>张三 <span class="sc3"><span class="re1">&lt;/name<span class="re2">&gt;</span></span></span><br>
<span class="sc3"><span class="re1">&lt;password<span class="re2">&gt;</span></span></span>123456<span class="sc3"><span class="re1">&lt;/password<span class="re2">&gt;</span></span></span><br>
<span class="sc3"><span class="re1">&lt;department<span class="re2">&gt;</span></span></span>技术部<span class="sc3"><span class="re1">&lt;/department<span class="re2">&gt;</span></span></span><br>
<span class="sc3"><span class="re1">&lt;sex<span class="re2">&gt;</span></span></span>男<span class="sc3"><span class="re1">&lt;/sex<span class="re2">&gt;</span></span></span><br>
<span class="sc3"><span class="re1">&lt;old<span class="re2">&gt;</span></span></span>30<span class="sc3"><span class="re1">&lt;/old<span class="re2">&gt;</span></span></span><br>
<span class="sc3"><span class="re1">&lt;/user<span class="re2">&gt;</span></span></span></div></td></tr></tbody></table></div>
</div>
	</section>
	
	<section id="json1" class="step slide rebuild">
		<h2>JSON应用</h2>
		<p>json作为一种数据交换格式，经常应用在数据传输、数据存储（mongoDB）等方面</p>
		<div data-build><center><img src="src/img/udc16.png" alt="" /></center>
		</div>
	</section>
	
	<section id="josnp" class="step slide rebuild">
		<h1>JSONP</h1>
		<p>JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问</p>
		<div data-build>
		<p><strong>应用</strong>：<a href="javascript:void((function(){var n=navigator.userAgent.toLowerCase();ie=n.indexOf('msie')!=-1?1:0;if(document.documentMode)ie=0;charset='';if(ie)charset=document.charset;src=ie&&charset=='utf-8'?'http://web.pinyin.sogou.com/web_ime/init2_utf8.php':'http://web.pinyin.sogou.com/web_ime/init2.php';element=document.createElement('script');element.setAttribute('src',src);document.body.appendChild(element);})())">云输入法</a></p>
		<input type="text" id="area_con" style="overflow:auto;" value="体验下云输入法" onfocus="if(this.value=='体验下云输入法'){this.value=''}" onblur="if(this.value==''){this.value='体验下云输入法'}"/>
		<center><img src="src/img/udc17.png" style="width:750px" /></center>
		</div>
		
	</section>
	
	<section id="other" class="step slide rebuild">
		<h1>其他</h1>
		<ul>
			<li>event事件处理</li>
			<li>ajax请求</li>
			<li>javascript框架</li>
			<li style="list-style:none;">
				<ul>
					<li style="list-style:square inside">jQuery/YUI/prototype/STK...</li>
				</ul>
			</li>
		</ul>
		<p style="margin-top:20px">一个JavaScript框架或库实际上是一系列工具和函数，它能更容易产生跨浏览器兼容的JavaScript代码。</p>
		<ul data-build>
			<li>选择器</li>
			<li>事件处理</li>
			<li>DOM操作</li>
			<li>实用函数</li>
			<li>Ajax</li>
		</ul>
	</section>
	<section id="html5" class="step slide rebuild">
		<h1>未来</h1>
		<h2>HTML5</h2>
		<ul data-build>
			<li>未来的(x)html和DOM标准，仍然处于完善阶段，不过市面上的浏览器已经开始支持html5</li>
			<li>语义化标记</li>
			<li>图像处理</li>
			<li>媒体支持</li>
			<li>改善用户界面</li>
			<li>网络存储</li>
			<li>网络通信</li>
			<li>移动设备支持</li>
			<li>增强可访问性</li>
		</ul>
		<img src="src/img/udc9.png" style="position:absolute;right:300px;top:300px;" />
	</section>
	
	<section id="map" class="step slide rebuild">
		<h2>HTML5实例：地图定位</h2>
		<div style="width:500px;height:400px;border:#ccc solid 1px;margin:0 auto;" id="dituContent"></div>
		<center><button onclick="initMap();">显示地图</button>
		<button onclick="getGeo()">定位</button></center>
	</section>
	
	<script type="text/javascript">
var map ;
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }
    
    //创建地图函数：
    function createMap(){
        map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(116.395932,39.929986);//定义一个中心点坐标
		//var point = new BMap.Point(116.42844172,39.94214552);//定义一个中心点坐标
        map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
       // window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_ZOOM});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0});
	map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
    }
	var translateCallback = function (point){
		map.clearOverlays();
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
		map.setCenter(point);
	}
    function getPositionSuccess(position){
		//alert(position.coords.latitude);
		//return;
		//console.log(position.coords);
		var point = new BMap.Point(position.coords.longitude, position.coords.latitude);
		map.centerAndZoom(point,15);
		return;
		
	}
    function getPositionError(error){
		switch (error.code) {
			case error.TIMEOUT:
				alert(" 连接超时，请重试 ");
				break;
			case error.PERMISSION_DENIED:
				alert(" 您拒绝了使用位置共享服务，查询已取消 ");
				break;
			case error.POSITION_UNAVAILABLE:
				alert(" 亲爱的火星网友，非常抱歉，我们暂时无法为您所在的星球提供位置服务 ");
				break;
		}
	}
	function getGeo(){
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError);
		}
		else {
			alert("你的浏览器不支持geolocation哦~");
		}
	}
    //initMap();//创建和初始化地图
</script>
	<section id="node" class="step slide rebuild">
		<h2>node.js</h2>
		<ul data-build>
			<li>服务器端js</li>
			<li>单线程</li>
			<li>非阻塞IO</li>
			<li>Google V8</li>
			<li>事件驱动</li>
		</ul>
		<center><img src="src/img/udc8.png" alt="" /></center>
		<footer>
			<a href="http://js8.in/tag/nodejs">nodejs文章</a>
		</footer>
	</section>
	
	<section id="editor" class="step slide rebuild">
		<h2>编辑器</h2>
		<ul>
			<li>IDE:Apanta、webStorm、eclipse</li>
			<li>文本编辑器：NotePad++、记事本、Sublime Text2……</li>
			<li>牛人利器：vim</li>
		</ul>
		<script type="text/javascript">
			var my_zen_settings = {
				html: {
					filters: 'bem,html'
				}
			};
			var loadZenCoding = function(){
				var script = document.createElement('script');
				script.onload = function(){
					document.getElementById('zencodingParent').addEventListener('keydown',function(e){
						e.stopPropagation();
					},false);
					zen_textarea.setup({pretty_break: true, use_tab: true});
					alert('加载zencoding成功，开始吧！');
				}
				script.src = 'src/js/zen_textarea.js';
				document.body.appendChild(script);
			}
		</script>
		<script type="text/javascript" src="http://zen-coding.ru/textarea/zen_textarea.min.js"></script>
		<div data-build id="zencodingParent">
			<h4>Zen Coding</h4>
			<p style="font-size:20px;">zenCoding是一种快速写html/css的软件，只是语法缩写，提高前端工作者的代码书写效率<br/>
			<button onclick="loadZenCoding()">加载ZenCoding</button>，加载之后输入zencoding语法，使用Tab做展开快捷键<br/>
			例如：html:xt>div#id.cls>ul>li*5>a[title="title$"]+img[src='src/img/$.png']
			</p>
			
			<center><textarea id="zencoding" class="zc-use_tab-true" style="width:700px;height:360px"></textarea></center>
		</div>
	</section>
	
	<section id="debug" class="step slide">
		<h2>调试工具</h2>
		<ul>
			<li>Firefox：firebug</li>
			<li>IE：debugBar， Companion.js</li>
			<li>Chrome：开发者工具</li>
		
		</ul>
		<img src="src/img/udc10.png" style="" />
		<img src="src/img/udc11.png" style="position:absolute;bottom:50px;left:0" />
		<img src="src/img/udc12.png" style="position:absolute;right:0;bottom:0" />
	</section>
	
	<section id="jslint" class="step slide rebuild">
		<h2>js代码质量检测工具：JSLint</h2>
		<ul>
			<li><strong>JSLint</strong> 是 Douglas Crockford 创建的js代码质量检测工具。虽然 JSLint 不能保证代码逻辑一定正确，但却有助于发现错误并教会开发人员一些好的编码实践。 </li>
		</ul>
		<center data-build><img src="src/img/udc13.png" style="height:400px" /></center>
		
	</section>
	
	<section id="book" class="step slide rebuild">
		<h1>学习书籍</h1>
		<div data-build>
		<img src="src/img/udc4.png" alt="" />
		<img src="src/img/udc5.png" alt="" />
		<br/>
		<img src="src/img/udc6.png" alt="" />
		<img src="src/img/udc7.png" alt="" />
		</div>
	</section>
	
	<section id="resource" class="step slide">
		<h1>学习资料</h1>
		<ul>
			<li>国内知名UED博客</li>
			<li>http://www.w3school.com.cn/js</li>
			<li>ITFeed.cn</li>
		</ul>
		<footer>
			RIA培训《<a href="http://www.slideshare.net/ksky521/javascript-8897192" target="_blank">js入门到高级</a>》
		</footer>
	</section>
	
	<section id="quetion" class="step" >
         <section class="title"><h1>Question?<br/><b>Q&A</b></h1></section>
    </section>
	<section id="end" class="step" >
        <section class="title"><h1>The End<br/><b>Thank You</b></h1></section>
    </section>
</div>
<div class="progress"><span></span></div>
</div>
<canvas id="myCanvas" width="1024" height="768">您的浏览器不支持HTML5,请升级或更换您的浏览器,强烈推荐您使用chrome浏览器。</canvas>
<menu class="controls" id="slideCtrl">
	<span class="tool home" onclick="location.hash='#cover'">!</span>
	<span class="tool paint">p</span>
	<span class="tool clearIt">d</span>
</menu>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script type="text/javascript" src="src/js/webslide.js"></script>
</body>
</html>